<!-- BEGIN:main -->



<!-- BEGIN:javascript -->
<script language="javascript" type="text/javascript">        
    
    loadList();
    
    function loadList(){
        var dataString = 'hdAction=loadList';            
        $.ajax({
            url: './components/com_cart/index.php',
            type: "POST",
            data: dataString,
            cache: false,
            beforeSend: function()
            {
                $("#flash").show();
                $("#flash").html('<img src="./templates/default/images/loading.gif" />');
                $('#itemList').html('');  
            },
            success: function(html){                        
                // sau khi xoa xong thi hien thi lai danh sach
                $("#itemList").html(html);
                $("#flash").hide();
            }
        });    
    }
</script>
<!-- END:javascript -->




<!-- BEGIN:layout -->
<div class="d_component">

              
            <div class="d_title_component1" style="text-align: left">
                Giỏ hàng của bạn

   </div>
    <div class="d_content_component">

        <form action="" method="post" id="frmCart" name="frmCart">   

            <input type="hidden" id="hdItemID" name="hdItemID" value="" />
            <input type="hidden" id="hdAction" name="hdAction" value="" />
            <div id="flash"></div>

            <div id="itemList">
            </div>

        </form>
    </div>

<!-- END:layout -->


<!-- BEGIN:item_table -->
<script>        
    jQuery(document).ready(function($){           
        // huỷ đơn hàng
        $('#btDestroyCart').click(function(){
            $('#hdAction').val('destroy');
            $('#frmCart').submit();
        });     
        
        // thanh toán
        $('#btPayment').click(function(){
            $('#hdAction').val('payment');
            $('#frmCart').submit();
        }); 
        
        // remove item
        $('.btRemoveItem').click(function(){  
            var itemID = $(this).attr('id');    
            $('#hdAction').val('removeItem');   
            
            var dataString = 'hdItemID='+itemID+'&hdAction=removeItem';
            
            $.ajax({
                type: "POST",
                data: dataString,
                cache: false,
                beforeSend: function()
                {
                    $("#flash").show();
                    $("#flash").html('<img src="./templates/default/images/loading.gif" />');
                    $('#itemList').html('');  
                },
                success: function(data){                        
                    if(data.trim()=='OK'){
                        // sau khi xoa xong thi tai lai danh sach
                        loadList();
                        
                        // tai lai so luong san pham trong gio hang
                        loadItemTotal();
                        $("#flash").hide();
                    }else{
                        alert(data);
                    }
                }
            });                       
        });  
        
        
        $('.btMinus').click(function(){  
        
            var itemID = $(this).attr('id');    

            $('#hdAction').val('minus');   
            
            var dataString = 'hdItemID='+itemID+'&hdAction=minus';
            
            $.ajax({
                type: "POST",
                data: dataString,
                cache: false,
                success: function(data){    
                    if(data.trim()=='OK'){
                        // sau khi xoa xong thi hien thi lai danh sach
                        loadList();
                        $("#flash").hide();
                    }else{
                        alert(data);
                    }
                }

            });                       
        });         
        
        
        

        $('.btPlus').click(function(){  
            var itemID = $(this).attr('id');  
            $('#hdAction').val('plus');            
            var dataString = 'hdItemID='+itemID+'&hdAction=plus';            
            $.ajax({
                type: "POST",
                data: dataString,
                cache: false,
                success: function(data){    
                    if(data.trim()=='OK'){
                        // sau khi xoa xong thi hien thi lai danh sach
                        loadList();
                        $("#flash").hide();
                    }else{
                        alert(data);
                    }

                }

            });                       
        });  
        
    });
</script>


<div id="rowWraper" class="row">
                 
                    <div id="cart_col" class="col">

<table width="100%"  cellspacing="0" cellpadding="0" class="list" style="padding:10px">
    <thead>
        <tr style="background:#89C01C;height:50px;">
            <th style="width: 10%;text-align: center;">Hình ảnh</th>
            <th style="width: 30%;text-align: center;">Tên sản phẩm</th>
            <th style="width: 15%;text-align: center;">Đơn giá</th>
            <th style="width: 13%;text-align: center;">Số lượng</th>
            <th  style="width: 32%;text-align: center;" >Thành tiền</th>
            <th></th>
        </tr>
    </thead>


    <tbody >
        <!-- BEGIN:list -->
        <tr> 
            <td style="text-align: center;"><img width="50px" style="border-radius:50%; " height="50px" alt="{ITEM_ID}" src="{ITEM_IMAGE}"></td>
            <td style="text-align: left;color:#444;font:550 13px arial;font-weight: 550;">{ITEM_NAME} </td>

            <td style="color:#3A9504;text-align: center">{ITEM_PRICE} (VNĐ)</td>

            <td style="text-align: center">
                <a id="{ITEM_ID}" title="Giảm 1" class="btMinus" style="cursor: pointer"><span><img alt="Giảm" src="./templates/default/images/less.png"></span></a>
                <b><span id="qty_15899" class="qty">{ITEM_QUANTITY}</span></b>
                <a id="{ITEM_ID}" title="Tăng 1" class="btPlus" style="cursor: pointer"><span><img alt="Cộng" src="./templates/default/images/add.png"></span></a>
            </td>

            <td style="text-align: center">
                <b><span id="total_each_item">{TOTAL_EACH_ITEM} (VNĐ)</span></b>
            </td>

            <td align="left" >                                          
                <a id="{ITEM_ID}" href="javascript:;" class="btRemoveItem"><span><img alt="Xóa" src="./templates/default/images/delete.png"></span></a>       
            </td>
        </tr>  
        <!-- END:list -->
    </tbody>


    <tfoot >
        <tr >
            <td style="border-top: 1px dashed #CCC;padding-top:10px;text-align:right;padding-bottom:20px;" colspan="2">
                
                    <!-- BEGIN:action_button -->
                    <div style="text-align: left">
                        <a class=" btDestroyCart d_button" href="javascript:void()" id="btDestroyCart" >Hủy đơn hàng</a>                            
                        <a class=" d_button" href="./com_payment.htm">Thanh toán</a> 
                    </div>
                    <!-- END:action_button -->

             
            </td>



            <td style="border-top: 1px dashed #CCC;padding-top:10px;padding-bottom:20px;text-align:right;color:#444;font:700 14px arial;font-weight: 700;padding-right:50px;" colspan="2">Tính tổng</td>
            <td style="text-align: center;padding-top:10px;padding-bottom:20px;border-top: 1px dashed #CCC;color:#444;font:700 14px arial;font-weight: 700">{TOTAL} (VNĐ)
               
            </td>
             <td style="border-top: 1px dashed #CCC;padding-top:10px;padding-bottom:20px;"></td>
        </tr>
    </tfoot>   
</table>

</div>
</div>
        
<!-- END:item_table -->
</div>



<!-- END:main -->
